<link rel="stylesheet" type="text/css" href="<?php echo css_url().'960grid/960.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'960grid/960_table.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'960grid/960_extra.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'dialog.css'?>">

<div id="chart-area" style="height: 400px">
    <image id="chart-image" src="<?php echo root_url()."testing_out.php"?>"/>
</div>

<div id="applicants-area">
    <div class="tab-titles">
        <div class="container_12">
            <div class="grid_1">&nbsp;</div>
            <div class="grid_3 tab-entities" clicked id='pending-tab'>Pending</div>;
            <div class="grid_3 tab-entities" id='accept-tab'>Accepted</div>
        </div>
    </div>
    <!-- Header Table -->
    <div id="applicants-table" style="width:100%; margin-bottom: 20px;">
        <div class="container_12 header">
            <div class="grid_1"> &nbsp;</div>
            <div class="grid_3">Email</div>
            <div class="grid_3">Name</div>
            <div class="grid_2">Apply Date</div>
        </div>

        <?php if(count($Post['Applicants']) == 0){ ?>
        <div class="container_12 row">
            <div class="grid_12" style="text-align:"> There is no applicants in this post now.</div>
        </div>
        <?php }else{ ?>
        <?php foreach($Post['Applicants'] as $Applicant):?> 
        <div class="container_12 row" UserID="<?php echo $Applicant['UserGroup3ID']?>">
            <div class="grid_1"> <input value="<?php echo $Applicant['PostApplyID'];?>" class="applicant-checkbox" type="checkbox"/></div>
            <a href="<?php echo site_url().'/user_group2/posts/apply_show/'.$Post['PostID'].'/'.urlencode($Applicant['UserGroup3ID'])?>">
                <div class="grid_3"><?php echo $Applicant['RelUserEmail']?></div>
                <div class="grid_3"><?php echo $Applicant['UserFullname']?></div>
                <div class="grid_2"><?php echo $Applicant['ApplyDate']?></div>
                <div class="hide-in-row">
                    <div class="content" style="background-image: url('<?php echo $Applicant['AvatarLink']?>');">
        <!--                <image src="" style="float:left"></image>-->
                        <?php 
                        if($Applicant['IntroductionContent']){
                            echo $Applicant['IntroductionContent']; 
                        }else{
                            echo "No introduction";
                        }
                        ?>
                    </div>
                </div>
            </a>
        </div>

        <?php endforeach; } ?>
        </div>    
    
</div>

<script>
    $(document).ready(function(){
        var ListID = [];
        
        $("div[UserID='"+GET['NotiUsID']+"']").attr('IsHightLight','1');
        
        $("input").on("click",function(e){
            e.stopPropagation();  
        });        
        var Array_Dates = <?php echo json_encode($Post['Date_Applies']['Array_Dates']); ?>;
        var Array_Num = <?php echo json_encode($Post['Date_Applies']['Array_Num']); ?>;
        
        $.ajax({
            url : "<?php echo root_url().'/create_chart.php'?>",
            type: 'post',
            async: false,
            data: { Array_Dates : Array_Dates, Array_Num : Array_Num},
            success: function(data){
                $("#chart-image").attr('src','<?php echo image_url().'chart.png'?>');
            } 
        });
        
        $('#pending-tab').on('click',function(){
            $.get("<?php echo site_url().'/user_group2/posts/manage_post_applicants/'.$Post['PostID'];?>", function(data){
                    $(".content-container").empty();
                    $(".content-container").html(data);
            });
        });
        
        $('#accept-tab').on('click',function(){
            $.get("<?php echo site_url().'/user_group2/posts/manage_post_content/'.$Post['PostID'].'/Accept';?>", function(data){
                    $(".content-container").empty();
                    $(".content-container").html(data);
            });
        });
    });


        
    
    
</script>